BOUWEN Ed 


Dossier 


Websiteproblemen opgelost 


Veel voorkomende 


Gewapend met deze 
Clickx extra heb je 
je eindelijk aan 

het bouwen van 

een site gewaagd. 
Onvermijdelijk word 
je tijdens één van 
de verschillende 
stappen in het web- 
bouwproces gecon- 
fronteerd met enkele 
heikele probleem- 
pjes. In dit dossier 
nemen we een kijkje 
naar de meest voor- 
komende webbouw- 
perikelen en geven 
we meteen ook de 
oplossingen ervoor. 


IN DIT DOSSIER BEHANDELEN WE TYPISCHE 
PROBLEMEN BĲ HET BOUWEN VAN EEN WEBSITE 


bouwperikelen 


Illustraties lopen te traag binnen 


Je hebt nog zo je best gedaan om die prachti- 
ge vakantiekiekjes in te scannen en ze een ere- 
plaats op je webpagina’s te gunnen, en wat 
blijkt dan: eenmaal on line, duurt het een eeu- 
wigheid voor je alle foto’s op je pagina’s te zien 
krijgt, zeker als je ze met een analoge modem 
opvraagt! 
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Select a thumbnail to view the ad and full-size photo. 
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Thumbnails: klein en handig… 


Je kan alvast het aantal foto’s dat op eenzelf- 
de webpagina te zien is, verminderen. De rest 
van je kiekjes komt dan op andere pagina’s te- 
recht. Met een knop VOLGENDE los je dus al 
veel problemen op. Een alternatief is een soort 
webalbum: je laat op één pagina je foto’s in 
postzegelformaat zien, en pas als je erop klikt, 
krijg je de pagina met de foto in vol ornaat. 
Een knop TERUG of OVERZICHT op die pagina 
is dan handig voor de surfer. Je kan die foto 
natuurlijk ook in een apart browservenster 
(met aangepaste grootte) laten openen. 

Blijft het inladen van foto’s een loodzware op- 
gave voor je browser, dan zijn je beeldbe- 
standen wellicht te zwaar. Ga bijvoorbeeld in 
je Verkenner even na hoeveel KB ze in beslag 
nemen. Een kleurenfoto op normaal formaat 
mag gewoonlijk niet meer dan zo’n 30 KB 
schijfruimte opeisen. Strenge regels schrij- 
ven zelfs voor dat een gemiddelde webpagina 
— met alle toeters en bellen — beter niet de 5o 
KB overschrijdt! 

Afslanken is dus de boodschap, maar hoe? 
Zijn er bepaalde stukken van je foto die je kan 
weglaten, dan kan je die alvast met je web- 
editor of je beeldbewerkingsprogramma af- 
knippen. 


Eigenschappen van figuur KES 

Algemeen| Video Vormgeving | 
Indeling 
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eel nedekseindteine genden 
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Verkleinen is meer dan hoogte en breedte aan- 
passen. 


Eventueel kan je je foto’s een kleiner formaat 
meegeven. Jammer genoeg houdt dat meer 
in dan enkel de breedte en hoogte van de af- 
beelding in je webeditor aanpassen. De foto 
komt dan wel in een kleiner formaat op je web- 
pagina terecht, maar dat doet niets af aan de 
bestandsgrootte. Je zal dus terug je beeldbe- 
werkingsprogramma moeten aanspreken om 
de foto wat geschikter te maken. 

Blijft de bestandsgrootte 
ook na deze operaties nog 
te groot, dan heb je de af- 
beelding hoogstwaar- 
schijnlijk met een te hoge 
resolutie gescand! Ver- 
geet niet dat de normale 
beeldschermresolutie in 
de buurt van de 72 dpi ligt 
(dots per inch). Het heeft 
dus geen enkele zin met 
een veel hogere resolutie 
in te scannen. Enkel als je de afbeelding op je 
webpagina groter wil krijgen, moet je de re- 
solutie navenant aanpassen. Voor een ver- 
dubbeling kan je dan met pakweg 150 ppi in- 
scannen. Bij scanners wordt die resolutie trou- 
wens vaak in ppi — pixels per inch — uitgedrukt. 
Heb je met een aanvaardbare resolutie ge- 
scand, dan moet je de afbeelding natuurlijk 
nog in een correct grafisch bestandsformaat 
gieten! Ook al is er intussen een derde kaper 
op de kust (png), toch hou je je toch het best 


Liefst rond 72 dpi. 


bij de twee formaten die door zowat alle scan- 
ners probleemloos worden ondersteund: jp(e)g 
en gif. Gaat het om tekeningen met egale kleur- 
vlakken zoals logo's of cartoons, dan gebruik 
je bij voorkeur het gif-formaat, met een palet 
van maximaal 256 kleuren. Voor foto’s is het 
jpg-formaat een stuk geschikter: dat kan na- 
melijk miljoenen kleurschakeringen aan en 
het comprimeert het bestand tegelijk zonder 
al te veel kwaliteitsverlies. 


Kies uit verschillende compressies. 


De meeste scan- en beeldbewerkingspro- 
gramma’s geven je zelfs de kans om de graad 
van compressie in te stellen: hoe hoger de 
compressie, hoe lager de kwaliteit. Wees niet 
bang een flinke compressiegraad te selecte- 
ren, zo’n 70% bijvoorbeeld. De betere pro- 
gramma’s laten je de resultaten van verschil 
lende compressie-instellingen netjes naast el- 
kaar zien, inclusief vermelding van de be- 
standsgrootte. Let wel even op: blijkt achter- 
af dat je toch een andere compressie wil, ver- 
trek dan altijd opnieuw van het originele beeld, 
want elke jpg-compressie gaat gepaard met 
kwaliteitsverlies! 


VAKTAAL 


Gif: (Graphics Interchange Format) Een gecompri- 
meerd formaat van afbeeldingen met maximaal 
256 kleuren. 
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BOUWEN 


Geen beeldmateriaal te bespeuren 


Je hebt nu al je beeldmateriaal een afslan- 
kingskuur laten ondergaan, en off line zien je 
foto’s er stuk voor stuk gelikt uit. De ellende 
begint pas als je ze on line, op je eigen web- 
ruimte, wil bewonderen. Je browser weigert 
ze namelijk in te laden, en toont je weinig meer 
dan een leeg kader met een rood kruisje… 
Laten we eerst uitvissen wat er is misgelo- 
pen. Klik daarom met de rechtermuisknop 
op het kader waarin je normaal de afbeel- 
ding verwachtte. Uit het snelmenu kies je 
dan de optie EIGENSCHAPPEN. Die geeft je heel 
wat nuttige informatie: de naam van het be- 
stand, de afmetingen en de padverwijzing. 
Krijg je dat om een of andere reden toch niet 
te zien, dan kan je nog altijd de html-bronco- 
de van die webpagina raadplegen. Daarvoor 
ga je in je browser op zoek naar het menu 
Beer, en klik je de optie BRON aan. Vermoe- 
delijk krijg je de code nu te zien in je Kladblok. 
Spoor vervolgens — eventueel met behulp van 
het menu ZOEKEN — een regel op die het label 
‘img’ (image) bevat. In diezelfde regel tref je 
ook het label ‘src’ (source) aan. Dat geeft de 
padverwijzing naar je beeldbestand aan. Nor- 
maal zie je hier ook de labels wipTH en HEIGHT 
verschijnen, waarin de afmetingen van de af- 
beelding in pixels zijn vastgelegd. Als je web- 
editor die twee labels er standaard niet bij 
plaatst, dan is dat een bijzonder slecht teken. 
In dat geval kan je browser tijdens het bin- 


(Hup met de bitjes! 


Je hebt een gulle zo MB webruimte van je pro- 
vider gekregen, en off line (op je eigen harde 
schijf) staat je gloednieuwe webstek al te blin- 
ken. Maar je hebt geen flauw idee hoe je dat 
nu allemaal naar je webruimte versast (geüp- 
load) krijgt. We laten je zien hoe je dat aan- 
pakt met behulp van het gratis fip-program- 
ma WS_FTP LE [ www.ftpplanet.com/ down- 
load.htm | (ook op de cd-rom bij Clickx 24!!) 
ook al laten sommige webeditors (waaronder 
FrontPage en Dreamweaver) toe dat vanuit 
het pakket zelf te doen. 

Uiteraard dien je dat gratis programma wel 
us eerstte downloaden 
(6go KB) en te in- 
stalleren. Veel meer 
dan dubbelklikken 
op het exe-bestand 
en wat administra- 
tieve gegevens in te 
voeren, behelst deze 
procedure echter 
niet. Daarna start je 


Figenschappen vans Session 
Genel | start | Advanced | Frowa | 
Profs Nae [Mijn webstek >} New 
Hoet Hamelddress [aow webiijt be Delete 
Host Type [Asemsic detect] 
ao foo Pimm 
Baemord [AE FP SayePwd 
ee 


Cammen | 


epen 
WS_FTP configureren. 
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nenhalen van je pagina nog geen rekening 
houden met de effectieve afmetingen van je 
foto’s, en zal de lay-out rare sprongen maken 
naarmate de foto’s zelf ook worden ingeladen. 
Wat kan je nu met deze informatie aanvan- 
gen? Ga voor alle zekerheid eerst even de af” 
metingen van de foto na: er is een waterkansje 
dat beide (breedte en hoogte) op o staan, maar 
je weet toch maar nooit. Controleer ook het 
bestandsformaat van de afbeelding: in prin- 
cipe moet de extensie steeds jp(e)g of gif zijn. 
Andere grafische formaten zijn zoals gezegd 
niet echt welkom bij de meeste browsers. Het 
spreekt natuurlijk vanzelf dat het louter her- 
benoemen van een bestand — met de juiste 


HIS weergeven of bewerken 


<html> 


chead> 

cneta http-aquies"Content-Type* 

content="text/htal: charset=iso-8859-1"> 

(meta nanm="GENERATOR" contentes"Microsoft FrontPage Express 2.0*> 
ctitle>Waanloos </title> 


Waar zit tante Truus? 

eigenhandig het pad moeten herstellen, zo- 
dat het netjes naar de map met afbeeldingen 
op de webserver verwijst. Stel dat het om de 
submap beelden gaat, net onder de map waar- 
in de webpagina zelf zich bevindt, dan zou 
dat met de volgende coderegel kunnen: 


extensie — weinig aarde aan de dijk brengt. 


Er zit dan weinig anders op dan opnieuw je 


<img src=" beelden/tantetruus.jpg”>. 


beeldverwerker aan te spreken en je foto naar 


een correct formaat weg te schrijven. 
Maar wedden dat het probleem in de pad- 
verwijzing ligt! Een hardnekkige begin- 
nersfout is dat het pad (op de on line web- 
pagina) naar een map op je eigen, lokale har- 
de schijf verwijst, zoals bijvoorbeeld: 


<img src=" …/ ProgramFiles/Clipart/ 


tantetruus.jpg”>. 


Verwacht dus niet dat iemand die je webstek 
bezoekt toevallig ook die foto op die plaats op 


Let goed op met hoofdletters en kleine let- 
ters: sommige webservers maken daar wel 
degelijk een onderscheid tussen: Tante- 
truus.jpg is dus niet hetzelfde als tante- 
truus.jpg. Ook in zo’n geval zet je browser 
er snel een (rood) kruis over! Bevindt de af- 
beelding zich ten slotte op een externe ser- 
ver, zorg er dan voor dat je in de padverwij- 
zing ook http:// opneemt. Bijvoorbeeld: 


<img src=" http://www.clickkxmagazine. 
be/imag/logo_clickx.gif”">. 


zijn harde schijf heeft gestockeerd! Je zal dus 


het eigenlijke programma op en 
ga je als volgt te werk: 


e je krijgt een dialoogvenster te zien, 
waar je het tabblad GENERAL opent; 
* geef een willekeurige naam aan het veld Pro- 


FILE NAME; 


e de andere gegevens (host name/address, user 
ID en password) moet je provider jou kunnen 
bezorgen - het veld Host TYPr laat je onge- 


moeid; 


* eventueel zet je een vinkje bij SAVE Pwp, zo- 


dat je niet telkens opnieuw je 
wachtwoord moet ingeven; 

* bevestig met een druk op Ok... en 
je bent ingelogd op je webruim- 
tel 

Het kopiëren van gegevens van je 

lokale harde schijf naar je web- 

ruimte (of omgekeerd) doe je on- 
geveer op dezelfde manier als je 
dat binnen je Windows Verkenner 
doet. In het linkervenster zie je de 
bestanden op je eigen pc, rechts de 


bestanden op je webstek. Je hoeft maar be- 
standen in het ene venster te selecteren (even- 
tueel met behulp van de Crrr- of de SHrrT- 
toets) en in het midden op het pijltje met de 
juiste richting te klikken. Het kopieerproces 
schiet in gang. Als alles goed gaat, kan je even 
later je eigen webpagina’s… on line bewon- 
deren! Vergeet wel niet de openingspagina 
van je webstek ‘eindex.htm’ te noemen, dan 
hoef je de paginanaam in je browser niet tel- 
kens mee in te tikken! Veel succes. 


Orde 
20001107 09:23 2 Moe 20010924 09-01 
20001110 08:47 26 jo) caezar 20010110 00-00 
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150 Opsrang ASC mode data cerwactiem hot Fi het 
Hecervod 1144 bytes m0] secs, (75,85 Khoa) banale voccended 
2 Teredee complete 
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Uploaden: een kwestie van klikken. 


Een gif tegen lelijke kaders 


Zolang je je braafjes aan rechthoekige af- 
beeldingen houdt, heb je er weinig last van. 
Maar zodra je wat grilliger vormen in je web- 
pagina stopt, krijg je er snel mee af te reke- 
nen: die vervelende rechthoekige kraag die 
zich rond je figuur nestelt en zo je webpagi- 
na ontsiert! 

Niets zo geschikt als een gif om je van dat ka- 
der te ontdoen. Dit grafische formaat stelt je 
namelijk in staat een bepaalde kleur aan te 
duiden die transparant kan worden gemaakt. 
Bovendien neemt het automatisch de kleur 
van de achtergrond aan waarop het plaatje te- 
rechtkomt. Haast alle beeldbewerkingspro- 
gramma’s bieden de mogelijkheid met trans- 
parante gif's te werken. Maar je kan ook ge- 
bruikmaken van gratis on-linediensten, zoals 


MyImager en Gif- 
Works f | . We nemen 
GifWorks als voorbeeld. 


«in het browservenster van GifWorks ver- 
schijnt een menu; hier klik je op Fire en kies 
je vervolgens de optie FILE OPEN; 

e je krijgt nu een nieuw venster te zien, waar 
je op de knop BLADEREN klikt; 

« zodra je het gifje op je harde schijf hebt ge- 
lokaliseerd, druk je op de knop UrPLoAp IMA- 
GE; 

° je gifje verschijnt nu on line; ga naar het 
menu Eprr en kies App TRANSPARENCY; 

e klik vervolgens op de kleur die je transpa- 
rant wil maken (in ons voorbeeld: wit); 

e klik met de rechtermuistoets op de aange- 


Microsoft Internet Explorer 


paste figuur en kies uit het snelmenu Ar- 

BEELDING OPSLAAN ALS; 
* kies een geschikte plaats en naam en beves- 

tig je keuze. 
Werk je met een recente versie van MS Front- 
Page, dan kan het nog eenvoudiger. Vanuit 
de werkbalk voor figuren (menu BEELD, WERK- 
BALKEN, FIGUREN) kan je het gereedschap se- 
lecteren om een transparante kleur in te stel- 
len. Daarna is het enkel nog een kwestie van 
de juiste kleur aan te stippen. 
Maar wat als de 
kleur die je trans- 
parant wou maken, 
niet alleen in die 
kraag voorkomt. 
Kijk maar eens 
goed naar ons voor- 
beeld: blijkbaar 
was het gezicht 
van het mannetje 
ook wit, en heeft GifWorks of MS FrontPage 
dat in één moeite door ook transparant ge- 
maakt! Dat los je het eenvoudigst op door in 
je beeldbewerkingsprogramma de kraag eerst 
een kleur mee te geven die nergens anders in 
de afbeelding voorkomt, en er daarna pas 
GifWorks op los te laten. 
Wil je kost wat kost een grillig gevormd deel 
van een foto op je webstek zetten, dan ligt het 
natuurlijk iets moeilijker! pg (het formaat ge- 
bruikt voor foto’s) ondersteunt namelijk geen 
transparantie! Er zijn gelukkig een aantal uit- 
valswegen. Zo kan je je af- 


NZ 


Zo transparant moet het 
nu ook weer niet! 


|_ Bestand Bewerken Beeld Favorieten Exta Help 


beelding toch als gif op- 


PER EE. 


Vorige Wolgende Stoppen _ Vernieuwen Start Zoeken 


Favorieten Geschiedenis 


S 


slaan, maar dan zit je wel 


[Adres [E£) D:temo\hbelck2.him 


met de beperking van 256 


| @Ganaa || Koppelingen 4 


kleuren. Een alternatief is 
het png-formaat, dat tallo- 
ze kleuren en bovendien 
een trapsgewijze transpa- 
rantie toelaat. Nadeel is 
dan wel dat lang niet alle 
browsers dat formaat on- 
dersteunen. 

Lijkt geen van beide op- 
lossingen je ideaal te zijn, 


[El Gereed [omi] 


IE) Deze computer he 


Met én zonder kraag! 


Eerst de kraag een ander 
kleurtje geven. 
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Transparantie in GifWorks. 


dan zit er weinig anders op dan toch maar bij 
het jpg-formaat te blijven, en de kraag dezelf- 
de kleur mee te geven als de achtergrond van 
je webpagina die dan wel een egale kleur moet 
hebben. Die kleur kan je in de broncode van 
je webpagina opvragen, meer bepaald in de 
coderegel met het label BODY BGCOLOR. Daar 
vind je een hexadecimale kleurcode van drie 
getallen (telkens van twee cijfers). Die geven 
respectievelijk de kleur rood, groen en blauw 
aan. Aan deze gegevens heb je normaal ge- 
zien voldoende om dezelfde kleur in je beeld- 
bewerkingsprogramma op te roepen. 


Html: Hypertext markup language, een soort taal 
die tekst, afbeeldingen, links enzovoort in webpa- 
gina’s giet. 


Pad: Een bepaalde weg die je moet volgen om 
aan gegevens te geraken. Een pad wordt vaak 
voorgesteld door een reeks van submappen. 


Pixel: Staat voor picture element, en is het klein- 
ste element dat kan worden gebruikt voor het 
opslaan van een figuur. 


Png: Portable Network Graphics: Een bestands- 
formaat speciaal voor het web ontworpen. 


Webserver: Computer waarop html-pagina’s 
klaarstaan om geconsulteerd te worden via het 
internet. 


Wysiwyg: What You See Is What You Get. Het 
komt erop neer dat je in het programma (zoals 
een tekstverwerker of webeditor) al onmiddellijk 
merkt hoe het eindresultaat er zal uitzien. 
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Achtergrondproblemen 


Je had graag een leuke achtergrondfiguur 
op je webpagina geplaatst, maar je krijgt 
die maar niet te zien, of het duurt een eeu- 
wigheid voor ze eindelijk opduikt. We la- 
ten je snel zien hoe je beide problemen 
oplost. 

Met de meeste wysiwyg-webeditors kan je 

snel een klaargemaakte achtergrondfiguur 

op je webpagina plaatsen. In FrontPage 
bijvoorbeeld doe je dat als volgt: 

e klik met de rechtermuistoets op een lege 
plaats in je webpagina; 

e kies de optie EIGENSCHAPPEN VAN PAGINA 
uit het snelmenu; 

e open het tabblad ACHTERGROND; 

e bij de sectie OPMAAK plaats je een vinkje 
voor ACHTERGRONDFIGUUR, en via de knop 
BLADEREN kan je vervolgens een geschikte 
figuur aanduiden (jpg of gif). 

Voor je je selectie met een druk op de knop 

OK bevestigt, doe je er goed aan ook een 

achtergrondkleur te selecteren. Dat lijkt 

misschien vreemd, maar stel even dat je 
achtergrondfiguur donkerbruin is en dat 
de tekst op je webpagina lichtgeel is. Zo- 
lang de achtergrondfiguur niet door de 


Eigenschappen van pagina 


Algemeen Achtergrond | Marges | Aangepast| Taal | 


Opmaak 

WV Achtergrondfiguur 

T watermerk 

[achtergrond ipa Bladeren. ij Eigenschappen. 

1” Aanwijseffecten van hyperlinks activeren 

anijs | 

Kleuren 

Achtergrond. [mmm | Hoperink: ME 

Tekst ns Bezochte hyperlink: |M Automatisch >] 
Actieve hyperlink: [MJ Automatisch] 

T Gegevens over de achtergrond van een andere pagina halen 


| 


OK | Anderen | 


<html> 


<p><img src=". 
height="400"></p> 


C Origineel € Huidig IW Kleurcodes weergeven 


Snel even een achtergrondfiguur in FrontPage. 


+ HTML weergeven of bewerken 


<head> 

<meta http-equiv="Content-Type" 
content="text/html: charset=iso-8859-1"> 
<meta name="GENERATOR" content="Microsoft FrontPage Express 2.0"> 
<title>Naamloos </title> 


/Beelden*20Héamp:M/fuif/Img013.jpg" width="600" 


browser is ingeladen, krijgt je bezoeker 
dan een haast onleesbare tekst te zien. 
Daarom leg je dus beter ook een achter- 
grondkleur vast, die bij voorkeur zo dicht 
mogelijk aanleunt bij de hoofdkleur uit je 
achtergrondfiguur. 

In hetzelfde dialoogvenster zie je ook WA- 
TERMERK staan. Als je die optie selecteert, 
blijft je achtergrondfiguur onbeweeglijk 
in het browservenster staan, ook al zou je 
bezoeker van zijn schuifbalken gebruik- 
maken. 

Vind je in je webeditor niet onmiddellijk 
een optie terug om een achtergrondfiguur 
in te voegen, dan kan het natuurlijk ook 
nog manueel. Je dient dan wel even in de 
broncode van je pagina te duiken. 

Spoor eerst de coderegel met het label Bopy 
op. Daarna kan je het volgende toevoegen: 


<body bgcolor="#800000" back- 
ground=" beelden/achtergrond.jpg” 
bgproperties= "fixed”">. 


Even tekst en uitleg: 

+ BGCOLOR geeft (in hexadecimaal formaat) 
de gewone achtergrondkleur weer; 

+ BACKGROUND geeft het verwijspad naar je 
achtergrondfiguur weer; 

e BGPROPERTIES="FIXED” dient om van je fi- 
guur een watermerk te maken, zodat het 
niet meescrollt met de pagina. 

Nuttig om weten is dat je browser een ach- 

tergrondfiguur in feite als een patroontje 

beschouwt dat hij over de hele webpagina 
blijft herhalen, tot die pagina volledig ge- 
vuld is. Wil je bijvoorbeeld een achtergrond 
in twee kleuren, met links een smalle mar- 
ge in één kleur, en het grote rechterdeel 
in een andere kleur, dan hoef je daar ab- 
soluut geen grote afbeelding voor klaar te 

ziel stomen! Het volstaat dan in 
je beeldbewerker een figuur 
te creëren van bijvoorbeeld 

1280 pixels breed (zodat die 

ook schermvullend is op 

een scherm met extra hoge 
resolutie) op 20 pixels 
hoog. Als je alles goed hebt 
gedaan, zorgt de browser 
automatisch voor een naad- 
loos tegelpatroon en haalt 
hij je achtergrondfiguur in 
minder dan geen tijd van 
de server op. Onze achter- 


Arndeen | _ Hep | _grondfiguur nam bijvoor- 


De huidige HTML-code bekijken of bewerken 


De broncode nalezen. 
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„ beeld slechts 3,3 KB in be- 
slag. 


Framed gaan 


Frames kunnen best handig zijn op een site, 
zeker nu zowat alle browsers ze ondersteu- 
nen. Een even typische als handige construc- 
tie is een navigeerbalk (hoofdmenu) links, bo- 
venaan rechts een titelbalk (of submenu) en 
een groter frame onderaan rechts voor de ei- 
genlijke inhoudspagina. Op voorwaarde na- 
tuurlijk dat alle links werken zoals je ze be- 
doeld had… 

Stel dat je hyperlinks in het linkerframe een 
nieuwe pagina in het kleine frame bovenaan 
rechts moeten openen, maar wat blijkt: je links 
openen een pagina in hun eigen frame waar- 
door meteen je hoofdmenu verdwenen is! 
Dat kan je vermijden door je framesetpagina 
als volgt op te stellen (wat FrontPage groten- 
deels automatisch voor zijn rekening neemt): 


<frameset cols="150,*"> 
<frame name="linkerzijde” scr=" 
links.htm”> 
<frameset rows="20%,*"> 
<frame name="rechtsboven” 
src="rboven. htm”> 
<frame name="rechtsonder” 
src="ronder. htm”> 
</frameset> 
</frameset> 


Je geeft dus elk frame een eigen naam (in ons 
voorbeeld respectievelijk: linkerzijde, rechts- 
boven en rechtsonder). Nu moet je er maar 
voor zorgen dat alle hyperlinks in de pagina 
die je in het linkerframe plaatst (hier links.htm 
genoemd) het attribuut TARGET=" RECHTSBO- 
VEN” meekrijgen, bijvoorbeeld: 


<a href="submenu1.htm” target=" 
rechtsboven”>Hobby's</a>. 


Klik je nu zo’n hyperlink aan in het linker- 
frame, dan wordt een nieuwe pagina in het 
frame rechtsboven geopend, zoals het hoort. 
Om te vermijden dat je zo’n target bij élke hy- 
perlink uit links.htm moet meegeven, kan je 
in deze pagina net boven de </HEAD>-tag de 
volgende instructie plaatsen: 


<base target= “rechtsboven”>. 


Een geneste hiërarchie met frames. 


WE GAAN EERST COMPRIMEREN, 
MLVORENS WE DE FOTO MAKEN / 


vere 


Deze tag zorgt er immers voor dat alle hyper- 
links nu standaard naar het frame met de 


naam ‘rechtsboven’ wijzen. 

Een iets ingewikkelder constructie is dat een 
klik op een hyperlink in het linkerframe nieu- 
we pagina’s moet openen in beide andere fra- 
mes tegelijk (rechtsboven én —-onder)! Zoiets 
kan je weliswaar met een stukje JavaScript op- 
lossen, maar met wat planning krijg je dat ook 
wel in pure html voor elkaar. Volg mee. We 
maken eerst een framesetpagina aan met een 


Doodse stilte 


Je tracht je webpagina’s wat op te fleuren met 
een leuk achtergronddeuntje of een blits mul- 
timediabestand, en wat blijkt? Je browser geeft 
geen piep, of je krijgt enkel iets te horen of te 
zien als je Internet Explorer gebruikt… Voor- 
al FrontPage-gebruikers hebben hiermee af 
te rekenen, want dat programma stemt zijn 
code vooral af op - wat dacht je - de Microsoft- 
browser! 
Om snel een avi-filmpje op je webpagina te 
plakken, is de verleiding in FrontPage na- 
tuurlijk groot om dat via het menu INVOEGEN, 
FIGUUR, Vipeo te doen… Geen goed idee, want 
op die manier kunnen enkel Internet Explo- 
rer-gebruikers van je opname genieten. Een 
alternatief is een ActiveX-control te gebruiken 
maar ook dat is in hetzelfde bedje ziek. 
Gelukkig kan je ook nog een beroep doen op 
enkele universele plug-ins 
voor multimedia. Open 
daartoe het menu INVOE- 
GEN in FrontPage en kies 
de opties GEAVANCEERD, IN- 
VOEGTOEPASSING. In het 
veld GEGEVENSBRON verwijs 
je dan naar het multime- 
diabestand. De andere at- 
tributen in het dialoog- 
venster spreken eigenlijk 
voor zich. 
Beschik je niet over Front- 
Page, dan kan je dat ook 
rechtstreeks in de html- 


Snel een filmpje 
plakken via 
Invoegen? Slecht 
idee! 


De oplossing heet 
plug-ins. 


code toevoegen, en wel als 
volgt: 


smal linkerframe en een breed rechterframe: 


<frameset cols= "150,*"> 
<frame name="linkerzijde” src= 
“links.htm”> 
<frame name="rechterzijde” 
src="rechts. htm”> 

</frameset> 


De pagina ‘rechts.htm’ wordt op zijn beurt 
ook een framesetpagina, met de volgende 


<embed width= "240" height="320" 
src="vakantie/video/zanzibar.mov”> 


Is de vereiste plug-in niet aanwezig, dan kan je 
een alternatieve boodschap opnemen tussen 
de tags <NOEMBED> </NOEMBED>. Afhankelijk 
van de plug-in kan je ook nog extra attributen 
opnemen binnen de <EMBED>-tag. Voor een 
RealAudio-bestand bijvoorbeeld kan je er via de 
code AUTOSTART="TRUE" voor zorgen dat het ge- 
luid onmiddellijk begint te spelen. 

Ongeveer dezelfde problematiek zien we bij 
achtergrondgeluiden. Gebruik je FrontPage, 
dan voeg je zo’n geluid wellicht toe via het dia- 
loogvenster EIGENSCHAPPEN VAN PAGINA, tab- 
blad ALGEMEEN, ACHTERGRONDGELUID. Deze op- 
tie zorgt ervoor dat er net voor de </HEAD>-tag 
een coderegel als <BGSOUND SRC="GELUI- 
DEN\VALENTIJN.WAV” LOOP="-1"> wordt opge- 
nomen. Werkt prima onder Internet Explorer, 
maar laat opnieuw Netscape in stilte achter. 
Ook hier maak je dus beter gebruik van de 
<EMBED>-tag, bijvoorbeeld als volgt: 


<embed src=" geluiden/valentijn.wav” 
autostart= “true” volume="70" hid- 
den="true" loop=" true”> 


Deze code zorgt ervoor dat het geluid dadelijk 
begint te spelen (autostart), met een matig vo- 
lume (hier 70% van de standaard ingestelde 
geluidssterkte), dat het automatisch wordt her- 
haald (Loop), en dat de besturingsinterface on- 
zichtbaar blijft (HIDDEN). 


ingrediënten: 


<frameset rows="20%,*"> 
<frame name="boven” src="boven. 
htm”> 
<frame name="onder” src="onder. 
htm”> 

</frameset> 


Nu plaats je, opnieuw net boven de </HEAD>- 
tag in de pagina ‘links.htm’ de volgende code: 


<base target= “rechterzijde” > 


Klik je nu een hyperlink aan op deze pagina, dan 
wordt de framesetpagina rechts.htm vervangen 
door een andere framesetpagina. Deze laatste 
roept op zijn beurt dan weer twee nieuwe pagi- 
na’s aan, net zoals ‘rechts.htm’ dat ook deed. Zo 
zie je maar, het lijkt moeilijk… maar is het niet! 


ActiveX-controls: Minuscule programma’s die 
door websites gebruikt worden om speciale 
opdrachten naar de computer van de bezoeker te 
downloaden en die daar ten uitvoer te brengen. 
Zodra ze geïnstalleerd zijn, kunnen de ActiveX- 
controls door verschillende applicaties opnieuw 
gebruikt worden. 


Avi-formaat: (Audio Video Interleaved) Een exten- 
sie voor bestanden die video met geluid bevatten. 


Microsoft maakt veel gebruik van dit bestandstype 


en je kan het afspelen met de Mediaspeler in 
Windows. 


Frame: Een afgebakende ruimte op je blad papier 
of webpagina, waarbinnen je bijvoorbeeld tekst of 
afbeeldingen kan laten verschijnen. 


Ftp: (File Transfer Protocol) Hiermee kan je bestan- 


den via het internet van de ene naar de andere 
computer versassen. Van je pc naar een andere 


heet uploaden, in omgekeerde richting spreken we 


van downloaden. 


Hyperlink: Ook gewoon link genoemd. Een referen- 


tie naar een ander document of webpagina. 


Plug-in: Een klein programmaatje dat in een 


bestaand programma wordt geïntegreerd om nieu- 


we functies te kunnen vervullen. 


RealAudio: Een technologie om beeld en geluid 
rechtstreeks over het internet door te sturen. 


— Toon Van Daele — 
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